<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>进击的巨人</title>
    <link href="css/style.css" type="text/css" rel="stylesheet" media="all" />
    <style>
      .selected {
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <div class="head clearfix">
      <b class="fl"><img src="images/logo.jpg" /></b>
      <nav class="fr" style="margin-right: 20px">
        <a href="index.html">主页</a>
        <a href="about.html">故事剧情</a>
        <a href="pic.html">图片</a>
        <a href="news.html">主角经历</a>
        <a href="zhuce.html">注册</a>
      </nav>
    </div>
    <div class="main clearfix">
      <div class="banner">
        <div id="banner" class="banner wrapin">
          <ul id="b_pic">
            <li style="display: block"><img src="./images/banner1.jpg" /></li>
            <li><img src="./images/banner2.jpeg" /></li>
            <li><img src="./images/banner3.jpg" /></li>
          </ul>
          <ul id="b_an">
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
      <script src="./js/lib.js"></script>
      <div class="div7 bg000 clearfix">
        <div class="bar">
          <h3>主角经历</h3>
        </div>
        <div class="con">
          <ul id="latest_guide_list">
            <li>
              <a href="#"
                >巨人入侵：艾伦亲眼目睹了超大型巨人摧毁玛利亚城墙，导致许多人遇难，包括他的母亲。这个事件激发了他的决心，他决意加入调查兵团。</a
              >
            </li>
            <li>
              <a href="#"
                >训练兵营：艾伦接受了调查兵团的训练，在这个过程中他结识了许多队友，包括密卡·阿克曼和阿尔敏·阿鲁莱特。他们一起克服了许多困难，锻炼了自己的战斗技能和策略。</a
              >
            </li>
            <li>
              <a href="#"
                >墙外探险：艾伦和调查兵团的成员进行了多次墙外的探险，与巨人进行激烈的战斗。他们发现了人类之外的巨人存在，并探索了墙壁背后的秘密。</a
              >
            </li>
            <li>
              <a href="#"
                >逐渐揭露真相：艾伦逐渐揭示了巨人和墙壁之间的关系以及人类社会中的阴谋和背叛。他发现了巨人的真实身份，以及墙壁背后隐藏的秘密。</a
              >
            </li>
            <li>
              <a href="#"
                >艾伦的转变：在故事的进展中，艾伦经历了心理和情感上的转变。他被迫面对自己的过去和内心的矛盾，并逐渐接受了自己的真正身份和使命。</a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer">进击的巨人</div>
    <script>
      var listItems = document.querySelectorAll("#latest_guide_list li");

      for (var i = 0; i < listItems.length; i++) {
        listItems[i].addEventListener("mouseenter", function () {
          this.classList.add("selected");
        });

        listItems[i].addEventListener("mouseleave", function () {
          this.classList.remove("selected");
        });
      }
    </script>
  </body>
</html>
